<template>
  <div class="home-page">
    <PageHeader />
    <dashboard v-if="pageRoute === 'dashboard'" />
    <matching v-if="pageRoute === 'matching'" />
    <duringClass v-if="pageRoute === 'duringClass'" />
    <classroomRecord v-if="pageRoute === 'classroomRecord'" />
    <studentRecord v-if="pageRoute === 'studentRecord'" />

    <transition name="bounce">
      <div class="canvas-all-wrap" v-show="canvasDialogVisible" key="canvas-dialog-show">
        <Pen ref="pen" v-for="item in coursePenData" :key="item.mac" :mac="item.mac" :studentInfo="item.studentInfo" />
        <Pen  :mac="'001B100001BA'" />
<!--        <Pen v-for="i in 60" :key="i" :mac="'001B100001BA_ap-' + i" />-->
      </div>
    </transition>
    <transition name="bounce">
      <div class="good-dialog" v-if="goodDialogVisible" key="good-dialog-show">
        <div class="big-text">表现优秀</div>
        <div class="sub-text">请继续保持，写好每一笔字</div>
        <div class="bottom-wrap">
          <avatar :size="64" :pic="currentGoodData.studentPic"></avatar>
          <div class="name">{{ currentGoodData.studentName }}</div>
          <Handwriting :image="currentGoodData.image" :emojiVisible="false" :text-visible="false" />
        </div>
      </div>
      <div class="good-dialog" style="display: none" v-else key="good-dialog-hide"></div>
    </transition>
    <transition name="fade-right">
      <div class="bad-dialog" v-if="badDialogStudentData.length > 0" key="bad-dialog-show">
        <div class="top-wrap">
          <img src="@/assets/img/classroom/commonly-big.png" alt="">
          <div class="text">老师帮帮我</div>
        </div>
        <div class="middle-wrap">
          <div class="bad-item" v-for="(item, i) in badDialogStudentData" :key="item.key">
            <avatar :size="36" :pic="item.studentPic"></avatar>
            <div class="stu-info">
              <div class="name">{{ item.studentName }}</div>
              <n-tag type="primary">HELP</n-tag>
            </div>
            <Handwriting :image="item.image" :emojiVisible="false" :text-visible="false" :lazy-load="true" />
            <n-icon color="#B4BBC2" size="24" style="cursor: pointer" @click="badItemTap(i, item)">
              <CloseOutlined />
            </n-icon>
          </div>
        </div>
        <div class="bottom-wrap" @click="badClearTap">
          <n-icon>
            <DeleteOutlined />
          </n-icon>
          &nbsp;
          关闭全部
        </div>
      </div>
      <div class="bad-dialog" style="display: none" v-else key="bad-dialog-hide"></div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, watch, computed, onUnmounted} from 'vue';
  import dashboard from '@/views/dashboard/index.vue';
  import classroomRecord from '@/views/course/classroomRecord.vue';
  import studentRecord from '@/views/course/studentRecord.vue';
  import matching from '@/views/course/matching.vue';
  import duringClass from '@/views/course/duringClass.vue';
  import { useCourse } from '@/store/modules/course';
  import { getTeacherStudentList } from '@/api/course/index';
import {actionSqliteData, ipcSetWindowSize, saveSqliteData} from '@/utils/ipcRenderer';
  import { PageHeader } from '@/layout/components/Header';
  import { getApIp } from '@/api/base';
import {useIndexedDB} from "@/store/modules/indexedDB";
import Handwriting from '@/views/components/Handwriting/index.vue';
import { DeleteOutlined, CloseOutlined } from '@vicons/antd';

  const useCourseStore = useCourse();
  const coursePenData = computed(() => {
    return useCourseStore.getCoursePenData;
  });
const matchingPenData = computed(() => {
  return useCourse().getCoursePenData.filter((item) => item.studentInfo);
});
const goodDialogVisible = ref(false)
const currentGoodData = ref<any>({})
const badDialogStudentData = ref<any>([])
const canvasDialogVisible = computed(() => {
  return useCourseStore.getCanvasDialogVisible;
});
  const pageRoute = ref('dashboard');
  const store = useCourse();
  watch(
    () => store.pageRoute,
    (newValue) => {
      pageRoute.value = newValue;
    }
  );
  ipcSetWindowSize({ type: 'full' });

  async function badItemTap(i, item){
    badDialogStudentData.value.splice(i, 1)
    await actionSqliteData({
      action: 'update-bad-data',
      update_id: item.id
    })
  }
async function badClearTap(i){
  badDialogStudentData.value = []
  await actionSqliteData({
    action: 'update-all-bad-data',
  })
}
let goodTimer = setInterval(async () => {
  const res: any = await actionSqliteData({
    action: 'get-good-data',
    search_params: {
      courseId: useCourse().getCurrentCourseData.courseId,
    }
  })
  if (res?.result?.length > 0) {
    const temp = res.result[0]
    currentGoodData.value = {
      id: temp.id,
      image: `${temp.courseId}-${temp.mac}-${temp.studentId}-${Number(temp.regionId)}-${Number(temp.regionIndex)}.webp`,
      studentName: temp.studentName,
      studentPic: temp.studentPic,
    }
    goodDialogVisible.value = true;
    await actionSqliteData({
      action: 'update-good-data',
      update_id: temp.id
    })
    let setTimeoutInfo = setTimeout(() => {
      goodDialogVisible.value = false;
      clearTimeout(setTimeoutInfo)
    }, 2500)
  }
}, 3000)
let badTimer = setInterval(async () => {
  const res: any = await actionSqliteData({
    action: 'get-bad-data',
    search_params: {
      courseId: useCourse().getCurrentCourseData.courseId,
    }
  })
  if (res?.result?.length > 0) {
    badDialogStudentData.value = res.result.map(temp => {
      return {
        id: temp.id,
        image: `${temp.courseId}-${temp.mac}-${temp.studentId}-${Number(temp.regionId)}-${Number(temp.regionIndex)}.webp`,
        studentName: temp.studentName,
        studentPic: temp.studentPic,
      }
    })
  }
}, 3000)
  onMounted(async () => {
    useCourse().connectWebsocket();
    if (useCourseStore.getStudentData.length === 0) {
      getTeacherStudentList({ pageNum: 1, pageSize: 100 }).then((res) => {
        useCourse().setStudentData(res.records);
      });
    }
  });

  onUnmounted(() => {
    clearInterval(goodTimer)
    clearInterval(badTimer)
  })
</script>

<style lang="less" scoped>
  .home-page {
    height: 100%;
  }
  .bad-dialog{
    width: 350px;
    height: 780px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: -80px;
    background-color: #FFF7F0;
    border: 2px solid rgba(255,255,255,0.88);
    border-top-left-radius: 12px;
    .top-wrap{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      height: 80px;
      color: #1E232B;
      font-size: 24px;
      img{
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
    }
    .middle-wrap{
      height: 640px;
      overflow: auto;
      padding: 10px;
      .bad-item{
        height: 72px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 0 16px;
        .stu-info{
          flex: 1;
          margin: 0 6px;
          display: flex;
          align-items: center;
        }
        .name{
          font-size: 21px;
          color: #1E232B;
          margin-right: 10px;
        }
        ::v-deep(.handwriting-item){
          margin-right: 20px;
          .handwriting-inner{
            width: 48px;
            height: 48px;
          }
          .word-img{
            width: 48px;
            height: 48px;
          }
        }
      }
    }
    .bottom-wrap{
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      color: #1E232B;
      border-top: 1px solid #ECE5E1;
      cursor: pointer;
    }
  }
  .good-dialog {
    width: 426px;
    height: 418px;
    background: url('@/assets/img/good-dialog.png') center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -213px;
    margin-top: -209px;
    padding: 170px 40px 40px;
    .big-text{
      font-size: 30px;
      line-height: 40px;
      text-align: center;
    }
    .sub-text{
      color: #9AA1A8;
      font-size: 21px;
      line-height: 32px;
      text-align: center;
    }
    .bottom-wrap{
      display: flex;
      align-items: center;
      margin: 20px 24px 0;
      padding: 20px 0;
      border-top: 1px solid #E6EAED;
      .name{
        flex: 1;
        margin: 0 10px;
        font-size: 24px;
      }
      ::v-deep(.handwriting-item){
        .handwriting-inner{
          width: 60px;
          height: 60px;
        }
        .word-img{
          width: 60px;
          height: 60px;
        }
      }
    }
  }
  .bounce-enter-active {
    animation: bounce-in 0.5s;
  }
  .bounce-leave-active {
    animation: bounce-in 0.5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1);
    }
  }
  .canvas-all-wrap {
    position: absolute;
    width: 1200px;
    height: 800px;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -400px;
    z-index: 10;
    background-color: #fff;
    overflow: auto;
    //left: 0;
    //top: calc(100% + 84px);
    .canvas-item {
      display: inline-block;
      width: 280px;
      height: 280px;
      z-index: 11;
    }
  }
</style>
